import React, { useState } from "react";
import { searchBooksByInfo } from "@/apis";
import { BookInfo } from "@/types";
import { Button, ConfigProvider, Input, message, Select, Table } from "antd";
import { Link } from "react-router-dom";
import { fixLongText } from "@/utils";
import SideBar from "@/components/SideBar";
import style from "./index.module.less";
import { RenderEmpty } from "@/components/comp/RenderEmpty";
import {
  ReferenceBookPage,
  TextbookPage,
  NetResourcePage,
  TotalBooksPage,
  MessageComp,
} from "@/components/ShowBooks/comp";
import { FindFlag } from "@/components/ShowBooks/comp";
import { Tabs } from "antd";

const { Column } = Table;

const ShowBooks: React.FC = () => {
  const [booksInfo, setBooksInfo] = useState<BookInfo[]>([]);
  const [matchFlag, changeMatchFlag] = useState<string>("name");
  const [searchMassage, changeSearchMassage] = useState<string>("");
  const [messageApi, contextHolder] = message.useMessage();
  // const [findFlag, setFindFlag] = useState<FindFlag>(FindFlag.main);
  const [currentMajorName, setCurrentMajorName] = useState<string>("");

  const handleChangeMatchFlag = (matchFlag: string) => {
    console.log(`selected ${matchFlag}`);
    changeMatchFlag(matchFlag);
  };

  const handleChangeInputInfo = (inputInfo: string) => {
    changeSearchMassage(inputInfo);
  };

  /**
   * candle SideBar click func
   * @param majorName
   */
  const findMajorBySideBar = (majorName: string) => {
    setCurrentMajorName(majorName);
    searchBooksByInfo("major", majorName)
      .then((res) => {
        let dataLength = res.data.length;
        if (dataLength > 0) {
          messageApi.open({
            type: "success",
            content: `搜索到${dataLength}条书籍信息`,
          });
          setBooksInfo(res.data);
        } else {
          messageApi.open({
            type: "warning",
            content: "没有搜索到任何信息",
          });
        }
      })
      .catch((err) => {
        messageApi.open({
          type: "error",
          content: "错误！请检查您的网络设置！",
        });
        throw err;
      });
  };

  const flushBooksInfo = () => {
    searchBooksByInfo(matchFlag, searchMassage)
      .then((res) => {
        let dataLength = res.data.length;
        if (dataLength > 0) {
          messageApi.open({
            type: "success",
            content: `搜索到${dataLength}条书籍信息`,
          });
          setBooksInfo(res.data);
        } else {
          messageApi.open({
            type: "warning",
            content: "没有搜索到任何信息",
          });
        }
      })
      .catch((err) => {
        messageApi.open({
          type: "error",
          content: "错误！请检查您的网络设置！",
        });
        throw err;
      });
  };

  const onChangeFindFlag = (key: string) => {
    console.log(key);
  };

  const tabsItemsForFinding = [
    {
      label: `总库`,
      key: FindFlag[FindFlag.main],
      children: <TotalBooksPage bookInfoList={booksInfo}></TotalBooksPage>,
    },
    {
      label: `教材`,
      key: FindFlag[FindFlag.textbook],
      children: <TextbookPage bookInfoList={booksInfo}></TextbookPage>,
    },
    {
      label: `参考书`,
      key: FindFlag[FindFlag.reference],
      children: (
        <ReferenceBookPage bookInfoList={booksInfo}></ReferenceBookPage>
      ),
    },
    {
      label: `网络资源`,
      key: FindFlag[FindFlag.net],
      children: <NetResourcePage bookInfoList={booksInfo}></NetResourcePage>,
    },
  ];

  return (
    <>
      {contextHolder}
      <div className={style.mainContainer}>
        <SideBar findMajorBySideBar={findMajorBySideBar}></SideBar>
        <div>
          <div className={style.mainTitleContainer}>
            <h1 className={style.mainTitle}>课程支持资源发现平台</h1>
          </div>

          <br />
          <div>
            <Input.Group compact>
              <Select
                defaultValue="name"
                style={{ width: 200 }}
                onChange={handleChangeMatchFlag}
                options={[
                  { value: "code", label: "课程编号" },
                  {
                    value: "name",
                    label: "课程名称",
                  },
                  {
                    value: "institute",
                    label: "课程开设学院",
                  },
                  {
                    value: "major",
                    label: "适用专业",
                  },
                  {
                    value: "reference",
                    label: "参考书目",
                  },
                ]}
              />
              <Input
                style={{ width: "calc(100% - 262px)" }}
                defaultValue=""
                placeholder="请在此输入搜索内容"
                onChange={(e) => {
                  handleChangeInputInfo(e.target.value);
                }}
              />
              <Button type="primary" onClick={flushBooksInfo}>
                搜索
              </Button>
            </Input.Group>
          </div>
          <br />
          <div>
            <div>
              <Tabs
                onChange={onChangeFindFlag}
                type="card"
                items={tabsItemsForFinding}
                tabBarStyle={{ backgroundColor: "whitesmoke" }}
              />
            </div>
            <ConfigProvider renderEmpty={RenderEmpty}>
              {/*<Table dataSource={booksInfo}>
                <Column
                  title="课程代码"
                  dataIndex="code"
                  key="code"
                  sorter={(a: BookInfo, b: BookInfo) => {
                    return a.code.localeCompare(b.code);
                  }}
                ></Column>
                <Column
                  title="课程名称"
                  dataIndex="name"
                  key="name"
                  sorter={(a: BookInfo, b: BookInfo) => {
                    return a.name.localeCompare(b.name);
                  }}
                ></Column>
                <Column
                  title="课程开设学院"
                  dataIndex="institute"
                  key="institute"
                  sorter={(a: BookInfo, b: BookInfo) => {
                    return a.institute.localeCompare(b.institute);
                  }}
                ></Column>
                <Column
                  title="适用专业"
                  dataIndex="major"
                  key="major"
                  render={(text) => fixLongText(text, 10)}
                  sorter={(a: BookInfo, b: BookInfo) => {
                    return a.major.localeCompare(b.major);
                  }}
                ></Column>
                <Column
                  title="课程性质"
                  dataIndex="characteristics"
                  key="characteristics"
                  sorter={(a: BookInfo, b: BookInfo) => {
                    return a.characteristics.localeCompare(b.characteristics);
                  }}
                ></Column>

                <Column
                  title="先修课程"
                  dataIndex="prerequisite"
                  key="prerequisite"
                ></Column>
                <Column
                  title="参考书目"
                  dataIndex="reference"
                  key="reference"
                ></Column>
                <Column
                  title="操作"
                  dataIndex="id"
                  key="id"
                  render={(text) => {
                    return (
                      <>
                        <Link target="_blank" to={`/book/${text}`}>
                          详情
                        </Link>
                      </>
                    );
                  }}
                ></Column>
              </Table>*/}
            </ConfigProvider>
          </div>
        </div>
      </div>
    </>
  );
};
export default ShowBooks;
